<template>
	<view class="withdrawCash">
		<form>
			<view class="item">
				<view class="label">手机号</view>
				<input type="number" placeholder="请输入手机号" v-model="form.phone">
			</view>
			<view class="code">
				<view class="label">验证码</view>
				<input type="number" placeholder="请输入验证码" v-model="form.code">
				<view class="codebtn" @click="getCode()">获取验证码</view>
			</view>
			<view class="item">
				<view class="label">提现积分</view>
				<input type="number" placeholder="请输入提现积分" v-model="form.withdrawPoints">
			</view>
			<view class="tips">
				<view>
					当前可用积分，约<text>{{account.accountBalance *0.01}}元</text>
				</view>
				微信最低提现金额<text>{{config.weChatWithdrawalMin}}元</text>，支付宝最低提现金额<text>{{config.aliPayWithdrawalMin}}元</text>
			</view>

			<radio-group @change="choose($event)">
				<label class="item_label" v-for="(i,index) in Data" :key="index">
					<view class="label_radio">{{i.name}}</view>
					<view class="item_radio">
						<radio :value="i.value" :checked="index === current" color="#05cfae"
							style="transform:scale(0.7)" />
					</view>
				</label>
			</radio-group>

			<!-- 选择支付宝时显示 -->
			<view class="box" v-if="boxStatus">
				<view class="item">
					<view class="label">支付宝账号</view>
					<input type="text" placeholder="请输入支付宝账号" v-model="form.aliPayAccount">
				</view>
				<view class="item">
					<view class="label">真实姓名</view>
					<input type="text" placeholder="请输入真实姓名" v-model="form.name">
				</view>
			</view>
		</form>
		<view class="bottom">
			<view class="btn" style="background-color: #32C59A;" v-if="isFormReady(form)" @click="submit()">
				确认提现
			</view>
			<view class="btn" style="background-color: #a8a8a8ff;" v-else>确认提现</view>
		</view>
	</view>
</template>

<script>
	import {
		sendSms,
		withdrawSave
	} from '@/apis/request.js'

	export default {
		data() {
			return {
				Data: [{
					value: 'Wechat',
					name: '提现微信',
					checked: 'true'
				}, {
					value: 'Alipay',
					name: '提现支付宝'
				}],
				current: 0,
				boxStatus: false,
				btnStatus: true,
				form: {
					"aliPayAccount": "",
					"code": "",
					"name": "",
					"phone": "",
					"subType": 2,
					"type": 0,
					"withdrawPoints": ''
				},
				account: {},
				config: {}
			};
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.form.phone = this.userInfo.phone
			this.init();
		},
		methods: {
			init() {
				this.$api.http('/user/userAccountInfo/getAccountInfoByUserId', 'GET', {
					userId: uni.getStorageSync('userInfo').id
				}, res => {
					if (res.data.code == 200) {
						this.account = res.data.result;
					} else {
						this.$Toast(res.data.message || '请求失败，请重试！');
					}
				});
				this.$api.http('/user/medicalUserWithdraw/withdrawConfig', 'GET', {}, res => {
					if (res.data.code == 200) {
						this.config = res.data.result;
					} else {
						this.$Toast(res.data.message || '请求失败，请重试！');
					}
				})
			},
			getCode() {
				let params = {
					"phone": this.form.phone,
					"type": 2
				}
				sendSms(params).then(res => {
					this.$Toast(res.data.message || '请求失败，请重试！');
				})
			},
			isFormReady(form) {
				if (this.Data.value == 'Alipay') {
					if (form.phone == '') {
						return false
					} else if (form.code == '') {
						return false
					} else if (form.withdrawPoints == '') {
						return false
					} else if (form.aliPayAccount == '') {
						return false
					} else if (form.name == '') {
						return false
					} else {
						return true
					}
				} else {
					if (form.phone == '') {
						return false
					} else if (form.code == '') {
						return false
					} else if (form.withdrawPoints == '') {
						return false
					} else {
						return true
					}
				}
			},
			submit() {
				if (this.Data.value == 'Alipay') {
					this.form.type = 1
				} else {
					this.form.type = 2
				}
				let params = this.form;
				withdrawSave(params).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '申请提现成功',
							icon: 'success',
							duration: 2000
						});
					} else {
						uni.showToast({
							title: res.data.message || '请求失败，请重试！',
							icon: 'success',
							duration: 2000
						});
					}

				})
			},
			choose(e) {
				this.Data.value = e.detail.value
				if (this.Data.value == 'Alipay') {
					this.boxStatus = true
				} else {
					this.boxStatus = false
				}
			},
		}
	}
</script>

<style lang="scss">
	.withdrawCash {
		height: 100vh;
		background-color: #e7e7e7;

		.item {
			background-color: #fff;
			border-bottom: 1rpx solid #dddddd;

			.label {
				display: inline-block;
				width: 20%;
				font-size: 28rpx;
				text-align: center;
				line-height: 80rpx;
				vertical-align: middle;
				padding: 10rpx;
			}

			input {
				display: inline-block;
				width: 70%;
				font-size: 28rpx;
				line-height: 80rpx;
				vertical-align: middle;
				padding: 10rpx;
			}
		}

		.code {
			background-color: #fff;
			border-bottom: 1rpx solid #dddddd;

			.label {
				display: inline-block;
				width: 20%;
				font-size: 28rpx;
				text-align: center;
				line-height: 80rpx;
				vertical-align: middle;
				padding: 10rpx;
			}

			input {
				display: inline-block;
				width: 50%;
				font-size: 28rpx;
				line-height: 80rpx;
				vertical-align: middle;
				padding-left: 10rpx;
			}

			.codebtn {
				display: inline-block;
				width: 20%;
				font-size: 28rpx;
				line-height: 80rpx;
				vertical-align: middle;
				color: #32C59A;
			}
		}

		.item_label {
			background-color: #fff;
			display: inline-block;
			width: 100%;
			border-bottom: 1rpx solid #dddddd;

			.label_radio {
				display: inline-block;
				width: 80%;
				font-size: 28rpx;
				text-align: left;
				line-height: 60rpx;
				vertical-align: middle;
				padding: 10rpx;
				padding-left: 40rpx;
			}

			.item_radio {
				display: inline-block;
			}
		}

		.tips {
			padding: 20rpx;
			font-size: 24rpx;
			color: #7e7e7e;

			text {
				color: red;
			}
		}

		.bottom {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;

			.btn {
				margin: 25rpx;
				width: 700rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #FFFFFF;
				border-radius: 40rpx;
			}
		}
	}
</style>